.page {
    height: 100vh;
    background-color: white;
    // display: flex;
    // flex-direction: column;
    overflow: hidden;

    .question{
        height: calc(100% - 50px);
        position: relative;
    }

    .scrollview {
        width: 100vw;
        height: calc(100% - 50px);
        display: flex;
        overflow: auto;
    }

    .question-item{
        width: 100%;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        overflow: auto;
    }

    .head {
        padding: 32px 40px 0px;
        display: flex;
        position: relative;
        align-items: center;
    }

    .heade-type {
        border-radius: 100px;
        padding: 8px 20px;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        background: var(--gray-gray-1, #F4F5F7);
        margin-right: auto;
    }

    .question-card {
        display: flex;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        color: var(--gray-gray-4, #B1B9C4);
        justify-content: center;

        .question-num {
            color: var(--gray-gray-9, #263446);
        }

        image {
            width: 40px;
            height: 40px;
            margin-right: 12px;
        }
    }


    .question {
        flex: 1;
        overflow: auto;
        background-color: white;

        .question-title {
            padding: 32px 40px 0px;
            color: var(--gray-gray-9, #263446);
            font-size: 30px;
            font-style: normal;
            font-weight: 500;
            display: inline;
        }
    
        .title-highlight {
            display: inline-block;
            color: var(--blue-d, #3056CC);
            text-decoration: underline;
            text-decoration-style: dotted;
            font-size: 30px;
            font-style: normal;
            font-weight: 500;
            vertical-align: top;
        }
    

        .question-option {
            padding: 0px 40px 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 40px;

            .question-option-item {
                padding: 24px 16px;
                
                border-radius: 12px;
                text:first-child {
                    margin-right: 16px;
                }
            }

            .question-option-item-sure{
                background: var(--green-bg, #EDFAF7);
            }

            .question-option-item-wrong{
                background: var(--red-bg, #FDF2F2);
            }

        }

        .question-span {
            height: 16px;
            background-color: #F4F5F7;
        }

        .question-answer {
            display: flex;
            flex-direction: column;
            padding: 32px 40px 20px;

            .title {
                color: var(--gray-gray-9, #263446);
                font-size: 36px;
                font-style: normal;
                font-weight: 600;
            }

            .sure-answer {
                margin-top: 24px;
                padding: 20px 24px;
                border-radius: 8px;
                background: var(--green-bg, #EDFAF7);
                color: var(--green, #00AD6E);
                font-size: 30px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
            }

            .anser-analysis {
                margin-top: 24px;
                color: var(--gray-gray-7, #414D5E);
                font-size: 30px;
                font-style: normal;
                font-weight: 500;
            }


        }
    }

    .bottom {
        display: flex;
        flex-direction: column;

        .bottom-head {
            height: 128px;
            background-color: red;
            fill: linear-gradient(180deg, #E0E8FF 0%, #FFF 100%);
        }

        .bottom-button {
            display: flex;
            padding: 10px 40px;

            .button-xy {
                flex: 1;
                height: 108px;
                border-radius: 24px;
                background: linear-gradient(45deg, #3963E8 37.66%, #80B2FF 100%);
                margin-right: 24px;
                color: var(--gray-white, #FFF);
                text-align: center;
                font-size: 32px;
                font-style: normal;
                font-weight: 600;
                letter-spacing: 0.32px;
                line-height: 108px;
            }

            .button-next {
                width: 192px;
                height: 108px;
                border-radius: 24px;
                border: 1px solid var(--gray-gray-2, #E8EBEF);
                background: var(--gray-white, #FFF);
                color: var(--gray-gray-9, #263446);
                text-align: center;
                font-size: 32px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                line-height: 108px;
            }


        }
    }
}


.van-popup {
    border-radius: 32px 32px 0px 0px;
}

.pop-question-num {
    display: grid;
    border-radius: 32px 32px 0px 0px;
    gap: 32px;
    padding: 48px;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-columns: repeat(5, 1fr);
}

.pop-question-num-item {
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: var(--gray-gray-1, #F4F5F7);
    color: var(--gray-gray-9, #263446);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 104px;
}

.pop-question-num-item-sure {
    border: 1px solid var(--blue-l, #C4D3FF);
    background: var(--blue-bg, #F1F5FF);
    color: var(--blue-d, #3056CC);
}

.pop-question-num-item-wrong {
    border: 1px solid var(--red-l, #F5C6C6);
    background: var(--red-bg, #FDF2F2);
    color: var(--red-d, #B23434);
}


.xiaoyi-pop-up {
    display: flex;
    flex-direction: column;
}

.xiaoyi-pop-up-title {
    margin-top: 36px;
    margin-left: 40px;
    background: linear-gradient(59deg, #1E3580 -47.34%, #3461FF 94.55%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.xiaoyi-pop-up-context {
    margin: 40px 40px 0px;
    color: var(--blue-dst, #1E3580);
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    max-height: 700px;
    display: flex;
    flex-direction: column;
}

.xiaoyi-pop-up-baike{
    margin-bottom: 40px;
    font-weight: 600;
    font-size: 36px;
}

.xiaoyi-pop-up-line {
    height: 1px;
    margin: 0px 40px;
    border: #3056CC 1px dashed;
    margin-top: 32px;
    margin-bottom: 24px;
    opacity: 0.2;
}

.xiaoyi-pop-up-desc {
    color: var(--blue-d, #3056CC);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

